<!-- 文件所有权归北京优博泰克 -->
<template>
    <el-dialog title="" class="testLog" top="27vh" :visible.sync="showModal" width="310px" :before-close="handleClose"
        :show-close="false">
        <!-- <Verify :type="1" @success="onSuccess" @error="onFail" class="verify" fontSize="26px"></Verify> -->
    </el-dialog>
</template>

<script setup>
import { reactive, toRefs, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useCach } from "@/store/cach"
// import Verify from 'vue2-verify'
import api from '@/api'

let cachInfo = useCach()

let state = reactive({
    text: '滑动验证'
})
let { text } = toRefs(state)

let showModal = computed(() => cachInfo.showModal)

let handleClose = () => {
    cachInfo.changeModalStatus('')
    cachInfo.showModal(false)
}

//图片验证成功
let onSuccess = async () => {
    //成功后的逻辑代码
    let name = this.$parent.$refs.myLogin.loginForm.username
    let res = await api.getaxiosdata("active_account", {
        flag: 'active',
        username: name
    })
    if (res) {
        ElMessage({
            message: '激活成功!!',
            type: 'success'
        })
    }
    handleClose()
}

//验证失败
let onFail = () => {
    //失败后的逻辑代码
    ElMessage.error('验证失败, 请重试!!')
}
</script>

<style scoped lang="scss">
.testLog {
    :deep(.el-dialog__body) {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        overflow: hidden;
        padding: 30px 20px 60px 20px;
    }

    :deep(.el-dialog__header) {
        padding: 0;
    }

    :deep(.verification) {
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
    }
}

.verify {
    .verify-btn:hover {
        cursor: pointer;
        opacity: .8;
    }
}
</style>